<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"> -->
        <!-- <input type="text" place holder="按下回车提示输入" @keyup.delete="showInfo"> -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.esc="showInfo"> -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo"> -->

        <!-- tab可以切换元素焦点，必须配合keydown使用 -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keydown.tab="showInfo"> -->

        <!-- 系统修饰键ctrl，alt，shift，win，配合keyup使用，必须按下其他按键，当按键被抬起时事件触发，
                                             配合keydown使用，事件正常触发 -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo"> -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keydown.ctrl="showInfo"> -->

        <!-- 可以使用keyCode去指定默认的按键 -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo"> -->

        <!-- Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    Vue.config.keyCodes.huiche = 13

    const vm = new Vue({
        el:'#root',
        data(){
            return{
                name:'beijing'
            }
        },
        methods: {
            showInfo(e){
                // if(e.keyCode!==13){
                //     return
                // }
                // console.log(e.keyCode)
                console.log(e.target.value)
            }
        },
    })


</script>

</html>